<template>
  <!-- 页面页面 -->
  <el-container class="home_container">
    <!-- 头部 -->
    <el-header class="home_header" height="70px">
      <div class="header_title">
        <h3>叩丁狼电商运营平台</h3>
        <el-icon @click="isCollapse = !isCollapse"><Menu /></el-icon>
      </div>
      <div class="header_username">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ userStore.username }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="index">首页</el-dropdown-item>
              <el-dropdown-item command="loginOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 内容 -->
    <el-container class="home_container_in">
      <!-- 菜单 -->
      <el-aside width="fit-content">
        <el-menu active-text-color="#409eff" background-color="#304156" text-color="#fff" :default-active="currPath" class="el-menu-vertical-demo" :collapse="isCollapse" unique-opened router>
          <!-- 首页 -->
          <el-menu-item index="/index" :route="{ path: '/index' }">
            <i class="iconfont homepage"></i>
            <template #title><span>首页</span></template>
          </el-menu-item>
          <!-- 权限, 商品, 订单, 营销 -->
          <el-sub-menu :index="item.name" v-for="item in menuRoutes" :key="item.id">
            <template #title>
              <i class="iconfont" :class="item.icon"></i><span>{{ item.title }}</span>
            </template>
            <template v-for="(citem, cindex) in item.children" :key="citem.id">
              <el-menu-item :index="`/${item.name}/${citem.name}`" v-if="!citem.hidden" :route="{ path: `/${item.name}/${citem.name}` }">
                <i class="iconfont" :class="citem.icon"></i>
                <span>{{ citem.title }}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容 -->
      <el-main>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="index" :to="item.path ? { path: item.path } : {}">{{ item.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 右侧内容 -->
        <div class="home_main">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ArrowDown, Menu } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/module/user'
import { ref, computed } from 'vue'
import { reactive, toRefs, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { isToken } from '@/common'
import { ElMessage } from 'element-plus'
// 面包屑数据 接口
interface IbreadcrumbData {
  title: string
  path?: string
}
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const data: { breadcrumbData: IbreadcrumbData[] } = reactive({
  // 面包屑数据
  breadcrumbData: [],
})
const { breadcrumbData } = toRefs(data)
// 菜单 是否水平折叠收起菜单
const isCollapse = ref(false)
// 重构用户信息数据
const menuRoutes = computed(() => {
  return userStore.getMenusRoutes
})
// 当前路径(面包屑 和 菜单默认高亮)
const currPath = computed(() => {
  return route.path
})
// 监听 当前路径 改变 面包屑数据
watch(
  currPath,
  (newVal, oldVal) => {
    breadcrumbData.value.splice(0, breadcrumbData.value.length)
    // console.log(newVal.split('/'))
    const [, path1, path2] = newVal.split('/')
    // console.log(path1, path2)
    if (path1 == 'index') {
      breadcrumbData.value.push({
        title: '首页',
      })
      return
    }
    breadcrumbData.value.push({
      title: '首页',
      path: '/index',
    })
    for (const key in menuRoutes.value) {
      if (menuRoutes.value[key].name == path1) {
        breadcrumbData.value.push({
          title: menuRoutes.value[key].title,
          path: '/' + menuRoutes.value[key].name,
        })
        menuRoutes.value[key].children?.forEach((item) => {
          if (item.name == path2) {
            breadcrumbData.value.push({
              title: item.title,
            })
          }
        })
      }
    }
  },
  {
    immediate: true,
  }
)
// 下拉框按钮(首页 和 退出登录)
const handleCommand = (command: string | number | object) => {
  if (command === 'index') {
    // 前往首页
    router.push('/index')
  } else {
    // 退出登录
    // 调用 退出登录 方法
    isToken(
      () => {
        // 调用 退出登录 请求
      },
      () => {
        // 提示
        ElMessage.success('退出登录成功！')
      }
    )
  }
}
</script>

<style lang="less" scoped>
.home_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  // 头部
  .home_header {
    background-color: var(--el-color-primary);
    display: flex;
    justify-content: space-between;
    .header_title {
      display: flex;
      align-items: center;
      h3 {
        display: inline-block;
        padding-right: 20px;
        line-height: 70px;
        font-weight: 400;
        font-size: 24px;
        color: #fff;
      }
      i {
        font-size: 20px;
        cursor: pointer;
        color: var(--el-color-white);
      }
    }
    .header_username {
      font-size: 14px;
      height: 70px;
      :deep(.el-dropdown) {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        .el-dropdown-link {
          cursor: pointer;
          i {
            vertical-align: bottom;
          }
        }
      }
    }
  }
  // 内容
  .home_container_in {
    position: relative;
    height: calc(100% - 70px);
    // 菜单
    .el-aside {
      &::-webkit-scrollbar {
        width: 0;
      }
      .el-menu {
        height: 100%;
        border-right: 0;
      }
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 250px;
      }
    }
    // 右侧内容
    .el-main {
      flex: 1;
      padding: 0;
      overflow: auto;
      .el-breadcrumb {
        position: fixed;
        width: 100%;
        z-index: 999;
        background-color: #fff;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
      }
      .home_main {
        margin-top: 60px;
        padding: 10px 20px;
      }
    }
  }
}
</style>
